<script setup>
import { ref } from 'vue';
import FanSwiper from '..';
import Image from '../../image/image.vue';
import Lazyload from '../../lazyload';

if (window.app && !window.lazyloadRegistered) {
  window.app.use(Lazyload);
  window.lazyloadRegistered = true;
}

const list = [
  { cover: 'https://img.dac6.cn/fre/others/elejh1.11.png' },
  { cover: 'https://img.yzcdn.cn/vant/logo.png' },
  { cover: 'https://img.dac6.cn/fre/others/elejh1.11.png' },
];
const type2Padding = '0 12px';
const testType = ref(1);
const refSwiper = ref(null);

const num = ref(2);
const setNumber = () => {
  num.value = num.value + 1;
  if (num.value > 2) num.value = 0;
};
</script>

<template>
  <demo-block title="基础用法">
    <div @click="setNumber">1111</div>
    <FanSwiper
      v-model:current="num"
      :autoplay="2000"
      :custom-style="{ padding: '10px' }"
      :type="testType"
      inner-radius="8px"
      loop
      :list="list"
    >
      <template v-slot="{ item }">
        <Image :aspect-ratio="2.7" :src="item.cover" mode="scaleToFill" />
      </template>
    </FanSwiper>
  </demo-block>
  <demo-block title="纵向用法">
    <FanSwiper
      :custom-style="{ padding: '10px', height: '200px' }"
      vertical
      type="1"
      inner-radius="8px"
      :list="list"
    >
      <template v-slot="{ item }">
        <Image :aspect-ratio="2.7" :src="item.cover" mode="scaleToFill" />
      </template>
    </FanSwiper>
  </demo-block>
  <demo-block title="高度自适应">
    <FanSwiper
      :custom-style="{ padding: '10px' }"
      inner-radius="8px"
      :list="list"
      :autoplay="0"
      auto-height
      ref="refSwiper"
    >
      <template v-slot="{ item }">
        <Image :src="item.cover" mode="widthFix" />
        <div v-if="testType === 2" style="height: 200px"></div>
      </template>
    </FanSwiper>
  </demo-block>

  <demo-block title="样式二">
    <FanSwiper
      :custom-style="{ padding: type2Padding }"
      :type="2"
      :aspect-ratio="1"
      :list="list"
      inner-radius="8px"
    >
    </FanSwiper>
  </demo-block>
</template>
